<div v-if="show" class="main trade">
	<div class="box">
		<h1 class="tc">{{goods.goodsname}}({{goods.goodscode}})</h1>
	    <div class="sub_price row">
	        <div class="col bord">
	        	<!--行情价-->
		        <p class="bold tc" :class="{'color-up':hqdirect=='up','color-down':hqdirect=='down'}">{{hq.price|price(goods.mindecimal)}}</p>
		        <!--盈亏金额、比例-->
		        <p class="row tc">
		        	<span class="col" :class="{'color-up':hq.pricerange>0, 'color-down':hq.pricerange<=0}">{{hq.pricerange|range}}</span>
		        	<span class="col" :class="{'color-up':hq.pricerate>0, 'color-down':hq.pricerate<=0}">{{hq.pricerate|rate}}</span>
		        </p>
	        </div>
	        <div class="col">
	        <p>高：{{hq.high|price(goods.mindecimal)}}</p>
	        <p>低：{{hq.low|price(goods.mindecimal)}}</p>
	        <p>时：{{hq.time|time}}</p>
	        </div>
	        <div class="col">
	        <p>开：{{hq.open|price(goods.mindecimal)}}</p>
	        <p>收：{{hq.close|price(goods.mindecimal)}}</p>
	        <p>量：{{goods.issueamount-goods.surplus}}</p>
	        </div>
	    </div>
	</div>
	<div class="top-nav row">
	   <div class="col" :class="{'selected':nav==1}" @click="switchNav(1)">交易</div>
	   <div class="col" :class="{'selected':nav==2}" @click="switchNav(2)">行情走势</div>
	   <div class="col" :class="{'selected':nav==3}" @click="switchNav(3)">商品介绍</div>
	</div>
	<div v-show="nav==1">
	<div class="art_pro_tit">
	      <div class="row">
            <div class="col tc">五档</div>
            <div class="col tc">价格(元)</div>
            <div class="col tc">数量</div>
            <div class="col tc">操作</div>
          </div>
    </div>
    <div class="art_pro_sell">
		<div class="row" v-for="(row,index) in sell_arr">
	        <div class="col tc">卖<em :class="{'bgweight':index==4}">{{row[0]}}</em></div>
	        <div class="col tc">{{row[1]|fivePrice}}</div>
	        <div class="col tc">{{row[2]}}</div>
	        <div class="col tc"><span class="buy-btn" v-show="row[1]!='-'" @click="showForm(1,98,row[1],row[2])">应价买入</span></div>
		</div>
    </div>
    <div class="art_pro_buy">
    	<div class="row" v-for="(row,index) in buy_arr">
	        <div class="col tc">买<em :class="{'bgweight':index==0}">{{row[0]}}</em></div>
	        <div class="col tc">{{row[1]|fivePrice}}</div>
	        <div class="col tc">{{row[2]}}</div>
	        <div class="col tc"><span class="sell-btn" v-show="row[1]!='-'" @click="showForm(1,115,row[1],row[2])">应价卖出</span></div>
		</div>
    </div>
	</div>
	
	<!--配置2个以上的图表才给选择-->
	<nav v-if="nav==2 && C('producttrade_charts_types').length>=2" class="row tc mt1">
		<a class="col"></a>
		<template v-for="(type,i) in C('producttrade_charts_types')">
		<a class="col">
			<label v-if="i==0"><input type="radio" name="chartsType" @click="chartsChange(type)" checked="checked" />{{type|chartsTypeName}}</label>
			<label v-else><input type="radio" name="chartsType" @click="chartsChange(type)" />{{type|chartsTypeName}}</label>
		</a>
		</template>
		<!--<a class="col">
			<label><input id="k" type="radio" name="chartsType" checked="checked" @click="chartsChange('k')" />日线</label>
		</a>
		<a class="col">
			<label><input id="line" type="radio" name="chartsType"  @click="chartsChange('line')" />历史价格</label>
		</a>-->
		<a class="col"></a>
	</nav>
	<div v-show="nav==2" class="box">
	   <div class="charts" id="charts"></div>
    </div>
    
	<div class="box" v-show="nav==3" v-html="desc"></div>
	<div class="pop-page trade-nav" v-show="pop==1">
	     <div class="row tc">
	         <div class="col box" @click="showForm(2,98)">挂单买入</div>
	         <div class="col box" @click="showForm(2,115)">挂单卖出</div>
	     </div>
	</div>
	<div class="pop-page pop-form" v-show="pop==2">
	<p class="btn bord-rad-top-3 tc">{{formTitle}}</p>
	<form class="main">
	<div class="box">
		<div class="row">
		    <label class="tc">商品名称</label><div class="col">{{goods.goodsname}}</div>
		</div>
		<div class="row">
		    <label class="tc">商品代码</label><div class="col">{{goods.goodscode}}</div>
		</div>
		<div class="row"> <!--价格-->
		    <label class="tc">{{formTitlePrice}}</label>
		    <div class="col">
		    	<input class="ipt" type="text" v-model="formPrice" v-if="form.type===2"/>
		    	<span v-else>{{formPrice|price(mindecimal)}}</span>
		    </div>
		</div>
		
		<div class="row" v-if="form.type==2"> 
		    <label class="tc">价格区间</label>
		    <div class="col"><span class="color-up">{{computedDownPrice}}&lt;=价格&lt;={{computedUpPrice}}</span></div>
		    <!--<div class="col"><i class="iconfont icon-opt" :class="{'active':priceOptionType=='up'}">&#xe8e4;</i><span class="color-up">涨停价：{{computedUpPrice}}</span></div>
		    <div class="col"><i class="iconfont icon-opt"  :class="{'active':priceOptionType=='down'}">&#xe8e4;</i><span class="color-down">跌停价：{{computedDownPrice}}</span></div>-->
		</div>
		<div class="row"> <!--数量-->
		    <label class="tc">{{formTitleNum}}</label><div class="col"><input class="ipt" type="text" v-model="formNum"/></div>
		</div>
		<div class="row">
		    <label class="tc">{{formTitleNumMax}}</label><div class="col">{{form.canamount}}</div>
		</div>
		<div class="row"> <!--总计-->
		    <label class="tc">{{formTitlePriceTotal}}</label>
		    <div class="col" v-if="form.type==1">
		    	<!--应价-->
		    	{{formPrice*formNum|priceFormat}}
		    </div>
		    <div class="col" v-else>
		    	{{formPrice*formNum|toFixed}}
		    </div>
		</div>
	</div>
	<div class="form-btnCt row tc">
	     <div class="col"><input type="button" class="btn-cancel bord-rad" @click="hideForm" value="取消"/></span></div>
	     <div class="col"><input type="button" class="btn bord-rad" value="确认" @click="subForm(form.type,form.direct)"/></div>
	</div>
	</form>
	</div>
	
	<div class="loadingCt" v-show="loading"></div>
</div>